<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="origin-trial"
		content="Atzk/dTch1Tt8qYq/UwLn6aWawymlc3xOKy3xiuwsaj1HBK6eCTBb+EGOnv7LK+oSQ8Fr1l/qykGHhK64mAn+w4AAABjeyJvcmlnaW4iOiJodHRwczovL2hwdWdpcy5naXRodWIuaW86NDQzIiwiZmVhdHVyZSI6IldlYkdQVSIsImV4cGlyeSI6MTY5MTcxMTk5OSwiaXNTdWJkb21haW4iOnRydWV9" />
	<title>gltf</title>
	<!-- <link rel="stylesheet" href="./index.scss" /> -->
	<style>
		* {
			box-sizing: border-box;
		}

		html {
			background: linear-gradient(316deg, #43a066, #2450e2);
			width: 100%;
			height: 100%;
		}

		body {
			font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
			overflow: hidden;
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
		}

		#app {
			height: 100%;
			width: 100%;
		}
	</style>
</head>

<body>
	<div id="app"></div>
	<script type="module">
		// import { captureFrame } from './webgpu-debugger.js';
		import {
			PerspectiveCamera,
			Scene,
			Vector3,
			Color,
			SkyBox,
			CubeTextureLoader,
			loadGLTF,
			OrbitControl,
			AmbientLight,
			DirectionalLight,
			Axes
		} from "../../dist/index.js";

		const init = async () => {
			const scene = new Scene({
				container: "app"
			});
			scene.background = {
				value: new Color().set("#1E1E20"),
				opacity: 0.0
			};

			const gltf = await loadGLTF(
				// 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/VC/glTF/VC.gltf'
				// "https://raw.githubusercontent.com/shrekshao/minimal-gltf-loader/store-drone-model/glTFs/glTF_version_2/buster_drone/scene.gltf"
				// "https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/CesiumMilkTruck/glTF/CesiumMilkTruck.gltf"
				//"../asset/model/dragon.glb"
				// "https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BoomBoxWithAxes/glTF/BoomBoxWithAxes.gltf"
				// 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/CesiumMan/glTF/CesiumMan.gltf'
				// "https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BrainStem/glTF-Binary/BrainStem.glb"
				//"https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Corset/glTF/Corset.gltf"
				//"https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Avocado/glTF/Avocado.gltf"
				//"https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/WaterBottle/glTF/WaterBottle.gltf"
				//"https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BarramundiFish/glTF/BarramundiFish.gltf"
				// "https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/DamagedHelmet/glTF/DamagedHelmet.gltf"
				//"https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/MetalRoughSpheres/glTF/MetalRoughSpheres.gltf"
				"https://minedata.cn/nce-static/support/demo/js-3d-ultra/zh/assets/DamagedHelmet/glTF/DamagedHelmet.gltf"
			);
			gltf.scenes.map((nodes) => {
				nodes.map((node) => {
					scene.add(node);
				});
			});
			const camera = new PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.01, 1000);
			camera.position.set(2, 0, 2);
			camera.lookAt(0, 0, 0);
			const ambientLight = new AmbientLight(new Vector3(1.0, 1.0, 1.0), 0.8);
			scene.add(ambientLight);
			const control = new OrbitControl(camera, document.getElementById("app"));
			const urls = [
				`../textures/royal_esplanade_1k/px.png`,
				`../textures/royal_esplanade_1k/nx.png`,
				`../textures/royal_esplanade_1k/py.png`,
				`../textures/royal_esplanade_1k/ny.png`,
				`../textures/royal_esplanade_1k/pz.png`,
				`../textures/royal_esplanade_1k/nz.png`
			];
			const skybox = new SkyBox(urls);
			skybox.visibility = false;
			window.addEventListener("resize", onWindowResize);
			scene.add(skybox);
			scene.setCamera(camera);
			const axes = new Axes();
			// scene.add(axes)
			// scene.add(directionalLight)
			var timeStampZero = performance.now();
			var timeParameter = 0;
			function animate(timestamp) {
				timeParameter = (timestamp - timeStampZero) * 0.001;
				requestAnimationFrame(animate);
				// gltf?.animations?.map?.((animation) => {
				// 	animation.play(timeParameter);
				// });
				control.update();
				scene.render();
			}
			function onWindowResize() {
				camera.aspect = window.innerWidth / window.innerHeight;
				scene.resize(window.innerWidth, window.innerHeight);
			}
			animate();
		};
		init();
	</script>
</body>

</html>